<template>
    <div class="info">
        <div class="tips">活动推广由酒店管理员发布，如有疑问请联系管理人员</div>
        <div class="list" @scroll="handleScroll" v-if="list.length > 0">
            <div class="masonry-layout">
                <div class="item masonry-item" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
                    <img v-lazy="item.image" alt="" />
                    <div class="title">{{ item.title }}</div>
                    <div class="hotel">{{ item.hotel }}</div>
                    <div class="time">{{ item.start_time.slice(0, 10) }} ~ {{ item.end_time.slice(0, 10) }}</div>
                    <img class="pdf_icon" v-if="item.pdf" src="@/assets/pdf_icon.png" alt="" />
                </div>
            </div>
        </div>
        <div class="eity" v-else>没有更多数据了</div>

        <img src="@/assets/shenqing.png" class="shenqing" alt="" @click="goShengqin" />
        <img src="@/assets/jilu.png" class="jilu" alt="" @click="goJilu" />
    </div>
</template>

<script>
import { Toast } from "vant";
export default {
    name: "newActivity",
    components: {},
    data() {
        return {
            list: [],
            page: 1,
            total: 0,
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        //获取数据
        async getList() {
            let t = Toast.loading({
                duration: 0,
                forbidClick: true,
                message: "加载中...",
            });

            try {
                let res = await this.$api.activities({ page: this.page, type: 0 });
                if (res.status_code != 200) {
                    Toast(res.message);
                    return;
                }

                this.list = this.list.concat(res.data.data);
                this.total = res.data.total;
                t.clear();
            } catch (e) {
                t.clear();
            }
        },

        handleScroll(e) {
            const scrollTop = e.target.scrollTop;
            const scrollHeight = e.target.scrollHeight;
            const clientHeight = e.target.clientHeight;
            if (scrollTop + clientHeight >= scrollHeight) {
                if (this.page < Math.ceil(this.total / 10)) {
                    this.page++;
                    this.getList();
                } else {
                    Toast.success({
                        message: "没有更多了",
                        duration: 1500,
                    });
                }
            }
        },

        goShengqin() {
            this.$router.push({
                path: "/newActivityPost",
            });
        },
        goJilu() {
            this.$router.push({
                path: "/newActivityList",
            });
        },
        goDetail(val) {
            this.$router.push({
                path: "/activityDetail",
                query: {
                    info: JSON.stringify(val),
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@supports (bottom: env(safe-area-inset-bottom)) {
    .info {
        height: calc(100vh - 50px - constant(safe-area-inset-bottom)) !important;
        height: calc(100vh - 50px - env(safe-area-inset-bottom)) !important;
    }
}

.info {
    background-color: #f8f8f8;
    z-index: 2;

    .tips {
        height: 0.8rem;
        background: #f9eedf;
        font-weight: 500;
        font-size: 0.32rem;
        color: #e8542c;
        text-align: center;
        line-height: 0.8rem;
    }

    .list {
        width: 100%;
        height: calc(100% - 0.8rem);
        padding: 0.4rem 0.2667rem;
        overflow-y: auto;
        overflow-x: hidden;

        .masonry-layout {
            column-count: 2;
            column-gap: 0.2667rem;
            break-inside: avoid;
        }

        .masonry-item {
            break-inside: avoid;
            margin-bottom: 0.2667rem;
        }

        .item {
            background: #ffffff;
            border-radius: 0.2667rem;
            padding-bottom: 0.4rem;
            width: 100%;
            position: relative;

            img {
                width: 100%;
                height: auto;
                border-radius: 0.2667rem 0.2667rem 0 0;
            }

            img[lazy="loading"] {
                width: 100%;
                height: 3rem;
                background-color: #f5f5f5;
            }

            img[lazy="error"] {
                width: 100%;
                height: 3rem;
                background-color: #f5f5f5;
            }

            .title {
                font-weight: bold;
                font-size: 0.3733rem;
                color: #323232;
                margin-top: 0.4rem;
                padding: 0 0.2rem;
            }

            .hotel,
            .time {
                font-weight: 500;
                font-size: 0.32rem;
                color: #999999;
                margin-top: 0.2667rem;
                padding: 0 0.2rem;
            }

            .pdf_icon {
                width: 0.8rem;
                height: 0.4533rem;
                position: absolute;
                right: 0;
                top: 0;
            }
        }

        .loading {
            text-align: center;
            padding: 0.2667rem;
            font-size: 0.32rem;
            color: #999999;
        }
    }

    .shenqing,
    .jilu {
        position: fixed;
        right: 0.3333rem;
        right: 10%;
        bottom: 5.3333rem;
        width: 1.2rem;
        height: 1.2rem;
        z-index: 999;
    }

    @media screen and (min-width: 750px) {
        .shenqing,
        .jilu {
            position: fixed;
            // right: 0.3333rem;
            right: 10%;
            transform: translateX(-600%);
            bottom: 5.3333rem;
            width: 1.2rem;
            height: 1.2rem;
            z-index: 999;
        }
    }

    .jilu {
        bottom: 3.4667rem;
    }

    .eity {
        text-align: center;
        font-size: 0.32rem;
        color: #999999;
        padding: 0.2667rem;
    }
}
</style>
